<template>
	<view class="container">
		<!-- 顶部栏 -->
		<view class="header">
			<view class="back-btn"></view>
			<text class="header-title">经营统计</text>
		</view>
		<!-- 统计tab -->
		<view class="tab-bar">
			<view :class="['tab', tabIndex === 0 ? 'active' : '']" @click="changeTab(0)">今日</view>
			<view :class="['tab', tabIndex === 1 ? 'active' : '']" @click="changeTab(1)">昨日</view>
			<uni-datetime-picker
				v-model="selectedDate"
				type="date"
				:clear-icon="false"
				:border="false"
				:hide-second="true"
				:start="startDate"
				:end="endDate"
				@change="onDateChange"
				class="tab tab-custom"
			>
				<template #default>
					<image class="calendar-icon" src="/static/calendar.png" />
					<text class="custom-label">{{ selectedDate ? selectedDate : '自定义' }}</text>
				</template>
			</uni-datetime-picker>
		</view>
		<!-- 收入/订单量卡片 -->
		<view class="card-row">
			<view class="card">
				<image class="card-icon" src="/static/income.png" />
				<view class="card-value">￥2066.56</view>
				<view class="card-label">收入</view>
			</view>
			<view class="card">
				<image class="card-icon" src="/static/order-blue.png" />
				<view class="card-value">53</view>
				<view class="card-label">订单量</view>
			</view>
		</view>
		<!-- 收入分布 -->
		<view class="section">
			<view class="section-title">收入分布</view>
			<view class="section-divider"></view>
			<view class="chart-row">
				<view class="pie-chart">
					<!-- 这里可用第三方图表组件，先用静态图/占位 -->
					<image src="/static/pie-demo.png" class="pie-img" />
				</view>
				<view class="pie-legend">
					<view class="legend-item">
						<view class="legend-dot wash"></view>
						<text>洗车 占比26%</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot care"></view>
						<text>保养 占比74%</text>
					</view>
				</view>
			</view>
			<view class="pie-labels">
				<view class="pie-label-left">
					<text>保养</text>
					<text class="pie-label-num">1566.56元</text>
				</view>
				<view class="pie-label-right">
					<text>洗车</text>
					<text class="pie-label-num">500元</text>
				</view>
			</view>
		</view>
		<!-- 订单分布 -->
		<view class="section">
			<view class="section-title">订单分布</view>
			<view class="section-divider"></view>
			<view class="chart-row">
				<view class="bar-chart">
					<!-- 这里可用第三方图表组件，先用静态图/占位 -->
					<image src="/static/bar-demo.png" class="bar-img" />
				</view>
				<view class="bar-legend">
					<view class="legend-item">
						<view class="legend-dot repair"></view>
						<text>维修 300单</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot care"></view>
						<text>保养 170单</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot wash"></view>
						<text>保养 346单</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const tabIndex = ref(0);
const selectedDate = ref('');

// 可选：限制可选日期范围
const startDate = ref('2020-01-01');
const endDate = ref('2099-12-31');

// 切换tab
function changeTab(idx) {
	tabIndex.value = idx;
	if (idx !== 2) {
		selectedDate.value = '';
		// TODO: 加载今日/昨日数据
	}
}

// 日期选择回调
function onDateChange(e) {
	selectedDate.value = e;
	tabIndex.value = 2;
	// TODO: 加载自定义日期数据
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #f7f7f7;
}
.header {
	background: linear-gradient(135deg, #3a8dff 0%, #166dff 100%);
	padding: 30rpx 0 30rpx 0;
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
	text-align: center;
	position: relative;
}
.header-title {
	color: #fff;
	font-size: 40rpx;
	font-weight: bold;
}
.tab-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	background: #fff;
	border-radius: 32rpx;
	margin: 10rpx 24rpx 24rpx 24rpx;
	box-shadow: 0 4rpx 16rpx #e6e6e6;
	overflow: hidden;
	padding: 0 24rpx;
}
.tab {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	color: #3a8dff;
	padding: 24rpx 0;
	border-radius: 40rpx;
	background: #f2f2f2;
	margin: 16rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tab.active {
	background: #3a8dff;
	color: #fff;
}
.calendar-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
}
.custom-label {
	color: #888;
	font-size: 28rpx;
}
.card-row {
	display: flex;
	flex-direction: row;
	margin: 24rpx 24rpx 0 24rpx;
}
.card {
	flex: 1;
	background: #fff;
	border-radius: 24rpx;
	margin-right: 24rpx;
	box-shadow: 0 4rpx 16rpx #e6e6e6;
	padding: 32rpx 0;
	text-align: center;
}
.card:last-child {
	margin-right: 0;
}
.card-icon {
	width: 56rpx;
	height: 56rpx;
	margin-bottom: 10rpx;
}
.card-value {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}
.card-label {
	font-size: 26rpx;
	color: #888;
}
.section {
	background: #fff;
	border-radius: 24rpx;
	margin: 24rpx 24rpx 0 24rpx;
	padding: 24rpx;
}
.section-title {
	font-size: 32rpx;
	color: #222;
	font-weight: bold;
}
.section-divider {
	height: 2rpx;
	background: #f2f2f2;
	margin: 16rpx 0 24rpx 0;
}
.chart-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.pie-chart {
	width: 240rpx;
	height: 180rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pie-img {
	width: 180rpx;
	height: 180rpx;
}
.pie-legend {
	flex: 1;
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.legend-item {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}
.legend-dot {
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
	margin-right: 12rpx;
}
.legend-dot.wash {
	background: #8c7bfa;
}
.legend-dot.care {
	background: #ff7cae;
}
.legend-dot.repair {
	background: #6fa8ff;
}
.pie-labels {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 12rpx;
}
.pie-label-left, .pie-label-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.pie-label-num {
	color: #888;
	font-size: 26rpx;
	margin-top: 4rpx;
}
.bar-chart {
	width: 340rpx;
	height: 180rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bar-img {
	width: 320rpx;
	height: 180rpx;
}
.bar-legend {
	flex: 1;
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
</style>
